<template>
	<view class="page home">
		<view class="swiper">
			<image src="http://static.huruqing.cn/fresh/banner1.jpeg" mode=""></image>
		</view>

		<view class="tabs">
			<u-tabs @click="changeTab" :list="tabList"></u-tabs>
		</view>

		<view class="list">
			<navigator v-for="item in productList" :url="'/pages/detail/detail?productId='+item.productId" class="item">
				<image :src="item.imgUrl"></image>
				<view class="box">
					<view class="name f16">{{item.masterName}}</view>
					<view class="f14 desc">{{item.slaveName}}</view>
					<view class="price f14">￥{{(item.minPrice/100).toFixed(2)}}</view>
				</view>
				<u-icon name="shopping-cart" size="35px"></u-icon>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
					name: '时令鲜果',
				}, {
					name: '海鲜水产',
				}, {
					name: '五谷杂粮'
				}],
				// 商品列表
				productList: [],

			}
		},
		
		onShow() {
			this.getProductList('时令鲜果');
		}, 
		
		methods: {
			// 获取商品列表
			getProductList(typeName) {
				var data = {
					typeName: typeName,
				}
				this.$get('/product/list',data).then((res)=>{ 
					this.productList = res.list;
				})
			},
			
			changeTab(item) {
				console.log(item);
				this.getProductList(item.name);
				
			}
			
		}
	}
</script>

<style>
	page {
		background-color: #f4f4f4;
	}

	.swiper image {
		width: 100%;
	}

	/* 
	.tabs {
		background-color: #fff;
		display: flex;
		justify-content: center;
	} */

	.list {
		background-color: #fff;
	}

	.list .item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px;
	}

	.list .item image {
		width: 100px;
		height: 100px;
		background-color: #f4f4f4;
	}

	.list .box {
		flex-grow: 1;
		margin-left: 5px;
	}

	.list .item .desc {
		padding-right: 10px;
	}

	.f16 {
		font-size: 32rpx;
	}

	.f14 {
		font-size: 28rpx;
	}

	.list .price {
		color: #c03131;
	}
</style>